<template>
    <div>
        <t-header></t-header>
        <el-alert
            title="专辑仅支持预览，不支持留言、收藏等功能"
            type="warning"
            center
            show-icon>
        </el-alert>
        <div class="info-title">{{albumInfoData.albumName}}</div> 
        <div class="w">
            <div class="info-list">
                <div @click="showPrivece(item,albumInfoData,index)" class="list-item" :key="index" v-for="(item, index) in albumInfoData.path">
                    <img      
                    v-lazy="`http://47.105.157.158:3000/images/cat/${albumInfoData.cat}/${item}`">
                    <div class="mask"></div>
                </div>
            </div>
        </div>

        <t-privece-album 
        :currentImg="currentImg" 
        :currentAlbum="currentAlbum"
        @closePrivece="closePrivece($event)"
        @nextImg="nextImg"
        @shangyizu="shangyizu"
        v-if="isShowPrivece"></t-privece-album>
    </div>
</template>

<script>
import Header from '../components/global/Header';
import { onMounted, ref } from '@vue/composition-api';
import PriveceAlbum from '../components/global/PriveceAlbum';

import axios from 'axios';
export default {
    components: {
        't-header': Header,
        't-privece-album': PriveceAlbum
    },
    setup(props, context) {
        axios.defaults.baseURL = 'http://47.105.157.158:3000';

        onMounted(() => {
            getAlbumInfo();
        })

        // 专辑详情数据
        const albumInfoData = ref('');
        // 获取专辑详情
        const getAlbumInfo = async function () {
            let albumID = context.parent.$router.currentRoute.params.id;
            let { data: res } = await axios.get(`/get/album/info/${albumID}`);
            if (res.status == 200) {
                albumInfoData.value = res.albumInfo;
            } else {
                context.parent.$message.error('获取专辑详情数据失败，请后退再重新尝试');
            }
        }


        // 控制预览的显示与隐藏
        const isShowPrivece = ref(false);
        // 当前预览的图片
        const currentImg = ref('');
        // 当前预览的专辑
        const currentAlbum = ref('');
        // 当前预览的索引
        const currentIndex = ref('');
        // 显示预览
        const showPrivece = function (item,album,index) {
            currentAlbum.value = album;
            currentImg.value = item;
            currentIndex.value = index;
            isShowPrivece.value = true;
        }

        // 关闭预览
        const closePrivece = function (e) {
            isShowPrivece.value = e;
        }

        // 下一组
        const nextImg = function () {
            if (currentIndex.value == currentAlbum.value.path.length - 1)
                return context.parent.$message.error('已经是最后一张了');
            currentImg.value = currentAlbum.value.path[currentIndex.value += 1];
        }

        // 上一组
        const shangyizu = function () {
            if (currentIndex.value == 0)
                return context.parent.$message.error('已经是第一张了');
            currentImg.value = currentAlbum.value.path[currentIndex.value -= 1];
        }

        const methods = { showPrivece, closePrivece, nextImg, shangyizu }

        return {
            ...methods,
            albumInfoData,
            isShowPrivece,
            currentAlbum,
            currentImg
        }
    }
}
</script>

<style lang="less" scoped>
.info-title {
    height: 155px;
    text-align: center;
    line-height: 155px;
    font-size: 26px;
    font-weight: 700;
    background-color: #fff;
    border-bottom: 1px solid #ececec;
    margin-bottom: 70px;
}

.info-list {
    columns: auto 3;
    column-gap: 12px;
    img {
        width: 100%;
        break-inside: avoid;
        margin-bottom: 10px;
    }
}

.list-item {
    position: relative;
    cursor: pointer;
    &:hover .mask  {
        display: block;
    }
    .mask {
        display: none;
    
    }
}
</style>